<template>
	<Layout class="p-3 bg-white">
		<Form class="p-2" :model="deposit" :label-width="130">
			<Row>
				<Col span="12">
					<FormItem class="w-100" label="客户名">
						<label>: {{this.client.clientName}}</label>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem class="w-100" label="门店">
						<label>: {{this.store.name}}</label>
					</FormItem>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<FormItem class="w-100" label="押金记录编号">
						<label>: {{this.deposit.depositId}}</label>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem class="w-100" label="支付平台支付编号">
						<label>: {{this.payment.originalCode}}</label>
					</FormItem>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<FormItem class="w-100" label="创建时间">
						<label>: {{this.deposit.ct}}</label>
					</FormItem>
				</Col>
				<Col span="12">
					<FormItem class="w-100" label="交易金额">
						<label>: {{this.deposit.amount}}</label>
					</FormItem>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<FormItem class="w-100" label="状态">
						<label>: <span v-if="this.clientDeposit.statu=='REQ'">已申请退款</span>
							<span v-else-if="this.clientDeposit.statu=='CRT'">未充值</span>
							<span v-else-if="this.clientDeposit.statu=='PAY'">已充值</span>
							<span v-else-if="this.clientDeposit.statu=='REJ'">已驳回退款</span>
							<span v-else-if="this.clientDeposit.statu=='BCK'">已退还</span>
							<span v-else-if="this.clientDeposit.statu=='APP'">已扣押</span>
							<span v-else-if="this.clientDeposit.statu=='CLO'">已关闭</span>
							<span v-else-if="this.clientDeposit.statu=='EXC'">退款异常</span>
						</label>
					</FormItem>
				</Col>
				<Col span="12">
				</Col>
			</Row>
			<!-- <FormItem>
				<Button class="m-1" @click="cancel">取消</Button>
				<Button class="m-1" v-if="this.clientDeposit.statu=='REQ'" type="success"
					@click="updateDeposit('BCK')">退还</Button>

				<Button class="m-1" v-if="this.clientDeposit.statu=='REQ'" type="error"
					@click="updateDeposit('REJ')">驳回</Button>

				<Button class="m-1" v-if="this.clientDeposit.statu==null || this.clientDeposit.statu=='REJ'"
					type="error" @click="appDeposit()">扣押</Button>
			</FormItem> -->
		</Form>
		<Layout style="font-size: 12px;" class="p-2 bg-white border-secondary">
			<Layout class="bg-white">
				退款申请记录
			</Layout>
			<Row >
				<Col 
					span="6"
					v-for="(dbr, dndex) in this.depositBackRequests" :key="dndex">
					<div class="m-1 p-1 shadow rounded">
						<div class="p-1">申请时间：{{dbr.ct}}</div>
						<div class="p-1">申请原因：{{dbr.reason}}</div>
						<div class="p-1 d-flex justify-content-between">
							<span v-if="dbr.statu == 'REQ'">已申请</span>
							<span v-else-if="dbr.statu == 'REJ'">已驳回</span>
							<span v-else-if="dbr.statu == 'BCK'">已退还</span>
							<span v-else-if="dbr.statu == 'CLO'">已关闭</span>
							<span v-else-if="dbr.statu == 'RUN'">退款中</span>
							<span v-else-if="dbr.statu == 'EXC'">退款异常</span>
							<Button @click="toBr(dbr.backId)" type="primary">查看详细</Button>
						</div>
					</div>
				</Col>
			</Row>
		</Layout>
	</Layout>

</template>
<script>
	export default {
		data() {
			return {
				deposit: {},
				payment: {},
				client: {},
				store: {},
				clientDeposit: {},
				depositId: 0,
				depositBackRequests: []
			}
		},
		methods: {
			toBr: function(backId) {
				this.$router.push({
					path: '/depositBackRequest/detail?backId='+backId
				});
			},
			loadBackRequest: function() {
				this.http.get({
					url: "/client/deposit-back-request/all",
					param: {
						depositId: this.depositId
					}
				}).then(res => {
					console.log(res);
					this.depositBackRequests = res;
				});
			},
			cancel: function() {
				this.$tabs.close();
			},

			search: function() {
				this.http.get({
					url: "/client/deposit-record/details",
					param: {
						depositId: this.depositId
					}
				}).then(data => {
					data.deposit_record.ct = data.deposit_record.ct.replace('T', ' ');
					this.deposit = data.deposit_record;
					this.payment = data.payment_record;
					this.client = data.client;
					this.store = data.store;
					this.clientDeposit = data.client_deposit;
					this.deposit.amount = data.deposit_record.amount / 100;
				});
			},
			updateDeposit: function(statu) {
				this.http.get({
					url: "/client/deposit-record/update/v2",
					param: {
						depositId: this.clientDeposit.depositId,
						clientId: this.clientDeposit.clientId,
						statu: statu
					}
				}).then(() => {
					this.message.info("修改成功");
					this.cancel(); //关闭窗口
				});
			},
			appDeposit: function() {
				this.http.get({
					url: "/client/deposit-record/cut/v2",
					param: {
						depositId: this.depositId,
						clientId: this.clientDeposit.clientId
					}
				}).then(() => {
					this.message.info("修改成功");
					this.cancel(); //关闭窗口
				});
			},

			init: function() {
				this.search();
			},

		},

		created: function() {},
		mounted: function() {
			this.depositId = this.$route.query.depositId;
			this.init();
			this.loadBackRequest();
		}
	}
</script>

<style>
</style>
